<template>
  <div style="margin: 10px 10px;">
    <!-- 表格 -->
    <div class="inline-box">
      <el-card>
        <div style="margin-bottom: 10px;">
          <el-input
            v-model="keyWord"
            clearable
            placeholder="根据品牌或厂商名称关键字搜索"
            style="width: 300px; margin-right: 20px;">
          </el-input>
          <el-button type="primary" icon="el-icon-search">搜索</el-button>
        </div>
        <div style="border: 1px gainsboro solid;">
          <el-table :data="brandList" height="500" stripe highlight-current-row v-loading="loading"
            element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
            <el-table-column label="id" prop="id" width="80"></el-table-column>
            <el-table-column label="品牌" prop="name" width="200"></el-table-column>
            <el-table-column label="厂商" prop="producer" width="200"></el-table-column>
            <el-table-column label="启用" fixed="right" width="100">
              <template slot-scope="scope">
                <el-switch v-model="scope.row.status" :active-value="1" :inactive-value="0" @change="disableBrand(scope.row.id)">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column label="操作" fixed="right" width="100">
              <template slot-scope="scope">
                <el-button type="infor" size="mini" @click="updateBrand(scope.row)">修改</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div style="margin-top: 10px;">
          <el-pagination background @size-change="selectPurchase()" @current-change="val => this.pagination.currentPage = val"
            :current-page="pagination.currentPage" :page-sizes="pagination.pageSizes" :page-size="pagination.pageSize"
            layout="total, sizes, prev, pager, next, jumper" :total="pagination.total">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <div class="inline-box">
      <div>
        <!-- 表单 -->
        <el-card>
          <div style="height: 50.4px; line-height: 50px;">
            <b>品牌信息管理</b>
          </div>
          <el-form label-position="left" label-width="60px">
            <el-form-item label="id">
              <div style="text-align: left;">{{item.id || '暂无数据'}}</div>
            </el-form-item>
            <el-form-item label="品牌">
              <el-input v-model="item.name"></el-input>
            </el-form-item>
            <el-form-item label="厂商">
              <el-input v-model="item.producer"></el-input>
            </el-form-item>
          </el-form>
          <el-button type="primary" @click="saveOrUpdate()">{{item.id !== undefined ? '修改' : '新增'}}</el-button>
          <el-button type="infor" @click="item = {}">取消</el-button>
        </el-card>
      </div>

    </div>
  </div>
</template>

<script>
import * as brand from '@/api/brand'

import brands from '@/data/brandData'

export default {
  name: 'BrandInfo',
  data () {
    return {
      item: {},
      brandList: brands,
      keyWord: '',
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizes: [10, 20]
      },
      loading: false
    }
  },
  watch: {
    pagination: {
      handler: function () {
        this.getBrandList()
      },
      deep: true
    }
  },
  created () {
    // this.getBrandList()
  },
  methods: {
    // 获取品牌信息
    getBrandList () {
      let params = {
        page: this.pagination.currentPage,
        rows: this.pagination.pageSize
      }
      if (this.keyWord.trim().length !== 0) {
        params.keyWord = this.keyWord
      }

      brand.selectByPage(params).then(resp => {
        this.pagination.total = resp.data.total
        this.brandList = resp.data.data
      }).catch(e => {
        let msg = e.response !== undefined ? e.response.data.message : '请求超时'
        this.$notify.error(msg)
      })
    },
    // 新增品牌信息
    saveBrand () {
      console.log('todo - 新增品牌信息')
    },
    // 获取进行修改的品牌信息
    updateBrand (item) {
      this.item = {...item}
    },
    // 提交新增/修改信息
    saveOrUpdate () {
      let data = {...this.item}
      if (this.item.id !== undefined) {
        // 修改
        brand.update(data).then(resp => {
          this.$notify.success('更新成功')
          this.getBrandList()
        }).catch(_ => { this.$notify.error({title: '警告', message: '品牌信息更新失败'}) })
      } else {
        // 新增
        brand.insert(data).then(resp => {
          this.$notify.success('新增成功')
          this.getBrandList()
        }).catch(_ => { this.$notify.error({title: '警告', message: '品牌信息新增失败'}) })
      }
      this.item = {}
    },
    // 禁用品牌信息
    disableBrand (id) {
      console.log('todo - 禁用品牌信息')
    }
  }
}
</script>

<style scoped>
 .inline-box {
    display: inline-block;
    vertical-align: top;
  }
</style>
